<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单与评论页面</title>
<style type="text/css">
#mess table tr td{
	width:230px;
}
#indent table tr td{
	padding-left:50px;
	width:230px;
	border-bottom:dashed 1px gray;
}
#head{
	width:1000px;
	height:50px;
	background-color: #C8BD37;
	text-align: center;
	line-height: 50px;
}
body{
	width:1000px;
	margin:0px auto;
	font:bold 20px '宋体';
}
.doComment {
	width: 70px;
	height: 30px;
	color: white;
	background-color: #C8BD37;
	border-radius: 5px;
}
.doComment:hover {
	width: 70px;
	height: 30px;
	color: white;
	background-color: #2E7A00;
	border-radius: 5px;
}
#cover{ 
    position:absolute;left:0px;top:0px;
    background:rgba(0, 0, 0, 0.4);
    width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height:100%;
    filter:alpha(opacity=60);  /*设置透明度为60%*/
    opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
    display:none; 
    z-Index:999;  
}
#showOrDis{ 
	width:645px;
	border:gray solid 1px;
    position:absolute;
    top:25%;
    left:27%;
    background-color:#fff;
    display:none;
    cursor:pointer;
    z-Index:9999;  
}
#quxiao{
	position:relative;
	left:500px;
	top:-23px;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../Res/JS/base.js"></script>
<script type="text/javascript">
	$(function(){
		var url="../../indentAction/findIndent";
		$.post(url,function(mess){
			var htmlStr="<table><tr><td>日期</td>"+
								"<td>价格</td>"+
								"<td>收货人</td>"+
								"<td>地区</td>"+
								"<td>备注</td>"+
								"</tr>";
			for(var i=0;i<mess.length;i++){
				var date = formatDate(mess[i].indDate,'yyyy-MM-dd');
				htmlStr+="<tr>"+
						"<td>"+date+"</td>"+
						"<td>"+mess[i].indPrice+"</td>"+
						"<td>"+mess[i].oper+"</td>"+
						"<td>"+mess[i].indSite+"</td>"+
						"<td>"+mess[i].remarks+"</td>"+
						"<td><button type='button' name='"+mess[i].indId+"' class='doComment'>评价</button></td>"+
						"</tr>";
			}
			htmlStr+="</table>";
			$("#indent").html(htmlStr);
			
			$(".doComment").click(function(){
				$("#clean").html("");
				cover.style.display="block";   //显示遮罩层
				$("#showOrDis").fadeIn(); 
				$("#indId").val($(this).attr("name"));
				var data={'indId':$(this).attr("name")};
				var url="../../indentAction/findFood";
				$.post(url,data,function(mess){
					var str="<table><tr><td>名字</td><td>数量</td><td>价格</td><td>小计</td></tr>";
					for(var i=0;i<mess.length;i++){
						str+="<tr><td>"+mess[i].foodName+"</td>"+
								  "<td>"+mess[i].foodNum+"</td>"+
								  "<td>"+mess[i].foodPrice+"</td>"+
								  "<td>"+mess[i].foodAllPrice+"</td>"+
							"</tr>";
					}
					str+="</table>"
					$("#mess").html(str)
				},"json")
			})
		},"json");
		//隐藏框框
		$("#quxiao").click(function(){
			$("#showOrDis").fadeOut();
			cover.style.display="none";   //隐藏遮罩层
		});
	})
</script>
<style type="text/css">
	.showOrDis{
		display: none;
	}
</style>
</head>
<body>
	<div id="head">
		<h2>馋了么订单</h2>
	</div>
	<div id="indent">
		
	</div>
	<div id="cover"></div>
	<div id="showOrDis">
	
		<div id="mess"></div>
		<div id="comment">
			<form action="../../commentAction/addComment">
				<input type="hidden" name="indId" id="indId"/>
				
				<textarea name="comContent" id="clean" rows="10" cols="60" placeholder="请填写您的宝贵意见"></textarea>
				<button type="submit">提交</button>
				<div id="modal">
					<div id="close"><button type="button" id="quxiao">取消</button></div>
				</div>
			</form>
		</div>
		
		
	</div>
</body>
</html>